<template>
  <a-modal v-model:visible="defineCodeValue1" title="码值定义" :width="800" ok-text="确定" cancel-text="取消" @ok="handleOk()" @Cancel="handleCancel()">
    <!-- 表格数据 -->
    <div>
      <!-- 未保存的 -->
      <template v-if="isSaved1 == false">
        <template v-if="clickAddCode == true">
          <div>
            <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="showNewAddCodeValue('新增码表编码')">新增码表编码</a-button>&nbsp;
            <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px">新增自定义编码</a-button>&nbsp;
          </div>
        </template>
        <template v-else-if="clickAddCode == false">
          <div>
            <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="showNewAddCodeValue('新增码表码值')">新增码表码值</a-button>&nbsp;
            <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="handleAdd">新增自定义码值</a-button>&nbsp;
            <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="showNewAddCodeValue('码表引用')">码表引用</a-button>
          </div>
        </template>
        <table-component :is-operate="isOperate"></table-component>
      </template>
      <!-- 已保存的 -->
      <template v-else>
        <div
          >引用码表名称:XXXXXXX
          <a-popconfirm title="确定解除码表引用?" ok-text="确定" cancel-text="取消" @confirm="changeisOperate" @cancel="cancel">
            <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px">解除码表引用</a-button>
          </a-popconfirm>
        </div>
        <table-component></table-component>
      </template>
      <footer>
        <template v-if="clickAddCode == true">
          <br />
          <a-form :model="formState" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }" autocomplete="off">
            <a-form-item label="码表名称" name="codesName" :rules="rules">
              <a-input v-model:value="formState.codesName" placeholder="请输入码表中文名称" />
            </a-form-item>

            <a-form-item label="码表说明" name="codesMsg">
              <a-textarea v-model:value="formState.codesMsg" placeholder="请输入码表说明" />
            </a-form-item>
          </a-form>
        </template>
      </footer>
    </div>
    <!-- 新增码表码值或新增码表编码或者是码表引用 -->
    <new-add-code :new-add-code-value="newAddCodeValue" :status="newAddCodeStatus" @close-is-add-code="handleCloseIsAddCode"></new-add-code>
  </a-modal>
</template>
<script setup lang="ts">
  import { addList, modifyList } from '@/api/test/api';
  import { Ref } from 'vue';
  import tableComponent from '@/pages/component/tableComponent.vue';
  import newAddCode from './newAddCode.vue';
  import { message } from 'ant-design-vue';
  const emit = defineEmits(['changeShow', 'unquoteSuccessed']);
  const props = defineProps({
    dataList: {
      type: String,
      default: () => {
        return [];
      },
    },
    defineCodeValue: {
      type: Boolean,
      default: false,
    },
    dialogStatue: {
      type: String,
    },
    isSaved: {
      type: Boolean,
    },
  });
  const isSaved1 = ref(true);
  watch(
    () => props.defineCodeValue,
    (nvalue: boolean) => {
      defineCodeValue1.value = nvalue;
      isSaved1.value = props.isSaved;
    },
  );
  interface SmallModal {
    codesId: string;
    configsId: number;
    configsMsg: string;
    configsName: string;
  }
  // let { isSaved } = { ...props };
  interface FormState {
    codesId: string;
    codesName: string;
    codesMsg: string;
  }
  let formState = reactive<FormState>({
    codesId: '',
    codesName: '',
    codesMsg: '',
    // remember: true,
  });
  // 表单校验规则
  const rules = [
    { required: true, message: '码表名称不能为空!', trigger: ['blur', 'change'] },
    { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '码表名称必须为汉字或字母组成', trigger: ['blur', 'change'] },
    // { validator: NameValidator, trigger: ['blur', 'change'] },
  ];
  console.log(isSaved1.value);
  const isOperate = ref(1);
  const tableSmallModal: Ref<SmallModal[]> = ref([]);

  const defineCodeValue1: Ref<boolean> = ref(false);
  let clickAddCode = ref(false);
  const handleOk = () => {
    emit('changeShow', 'false');
    defineCodeValue1.value = false;
    clickAddCode.value = false;
  };
  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('changeShow', 'false');
  };
  // 解除引用气泡框执行方法
  const confirm = (e: MouseEvent) => {
    console.log(e);
    message.success('Click on Yes');
  };
  // 解除引用气泡框取消方法
  const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('Click on No');
  };
  const changeisOperate = () => {
    emit('unquoteSuccessed', 'true');
    console.log('触发了1111111111111111111');
    isSaved1.value = !isSaved1.value;

    // console.log(isSaved1.value, '触发了1111111111111111111');
  };
  // 新增码表取值 ||新增码表编码 弹窗开始
  let newAddCodeStatus = ref(1);
  let newAddCodeValue = ref(false);
  const showNewAddCodeValue = (name: string) => {
    console.log('22222222', newAddCodeValue.value);
    if (name == '新增码表码值') {
      newAddCodeStatus.value = 1;
    } else if (name == '新增码表编码') {
      newAddCodeStatus.value = 0;
    } else if (name == '码表引用') {
      newAddCodeStatus.value = 2;
    }
    newAddCodeValue.value = true;
  };
  const handleCloseIsAddCode = (num: number) => {
    if (num == 1) {
      //状态为0 是新增码表码值 弹窗触发打开的
      clickAddCode.value = !clickAddCode.value;
    } else if (num == 2) {
      //状态为2 是码表引用 弹窗触发打开的
      isSaved1.value = !isSaved1.value;
    }
    newAddCodeValue.value = false;
  };
  //新增码表取值弹窗结束
</script>
<style lang="less" scoped>
  /deep/ .ant-table-thead > tr > th:not(.ant-table-cell:nth-child(3)):not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
    position: static;
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    color: #ff4d4f;
    content: '*';
    transform: translateY(0px);
  }
</style>
